<template>
	<view class="body" :style="{height:screenHeight}">
		<u-toast ref="uToast"></u-toast>
		<view style="height: 40%;">
			<view style="padding-top: 200rpx;margin: auto;width: 120px;height: 120px;">
				<u--image   :src="logoSrc" width="120px" height="120px"></u--image>
			</view>
		</view>
		<view class="login">
			<u--form labelPosition="left" :model="account" :rules="rules" ref="uForm">
				<u-form-item prop="email" borderBottom ref="refEmail">
					<u--input placeholder="请输入账号" prefixIcon="email"
					prefixIconStyle="font-size: 22px;color: #cad3d6" color="#cad3d6" v-model="account.email" border="none">
						</u--input>
				</u-form-item>
				<u-form-item prop="password" borderBottom ref="refPassword">
					<u--input placeholder="请输入密码" prefixIcon="lock"
					prefixIconStyle="font-size: 22px;color: #cad3d6" password  color="#cad3d6" v-model="account.password" border="none">
									</u--input>
				</u-form-item>
				<view style="margin: 40rpx;"> <a style="font-size: 16px; color: #6777ef; text-decoration: none"
						href="">忘记密码？</a></view>
				<u-button text="登录" color="linear-gradient(to right, #3dbdad, #00b6d1)" @click="submit"></u-button>
				<view class="register" @click="register"> 还没有账号？<span style="color: #007aff;">马上注册！</span></view>
			</u--form>
		</view>
		
	</view>
	</view>
</template>

<script>
	import api from '../api.js'
	export default {
		data() {
			return {
				screenHeight:this.$store.screenHeight,
				logoSrc:"/static/logo.png",
				account: {
					email: "1643017482@qq.com",
					password: "123456"
				},
				rules: {
					'email': [{
						type: 'string',
						required: true,
						message: "请填写邮箱",
						trigger: ['change', 'blur'],
						validator: (rule, value, callback) => {
							return uni.$u.test.email(value);
						}
					}],
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['change', 'blur']
					}
				}
			};
		},
		onLoad() {
		},
		methods: {
			toRegister() {
				uni.navigateTo({
					url: "/pages/system/register/register",
					animationType: 'pop-in',
					animationDuration: 5000
				})
			},
			async submit() {
				this.$refs.uForm.validate().then(res => {
					this.login()
				}).catch(errors => {
				})
			},
			async login(){
				var res = await api.Login(this.account)
				console.log(res);
				if(res.successed){
					this.$store.state.token = res.token
					uni.setStorage({key:"token",data:res.token})
					this.$refs.uToast.show({type: 'success',message:res.message,complete(){
						uni.redirectTo({
							url: '/pages/home/home'
						})
					}})
					
				}else{
					this.$refs.uToast.show({type: 'error',message:res.message})
				}
			},
			register(){
				uni.navigateTo({
					url: '/pages/system/register/register',
					animationType: 'pop-in',
					animationDuration: 20000
				})
			}
		}
	}
</script>

<style lang="scss">
	.body {
		// width: 100%;
		background: linear-gradient(#415169, #1e2d43);

		.login {
			width: 90%;
			margin: auto;

			.suffix {
				display: flex;
				right: 0;
				color: #cad3d6;
			}
			.register{
				margin: 30px 0;text-align: center;color: #f0f0f0;
			}
		}
	}
</style>
